import React from 'react';
import { View, Slider } from 'react-native';
import { Lt, Color, Nav, Label, Button, Fimage, Jpp, Jx, Dialog, Navigator } from "../_utils";
import { Net } from "../_net"
import { eRole } from './_me';

const c_defaultSliderValue = 10;
const c_agentName = eRole.names[eRole.AGENT];
// 升级代理
export class Promote extends React.PureComponent{
    constructor(props){
        super(props);
        
        const {data} = this.props.navigation.state.params;
        this.state = {
            data,
            slider:c_defaultSliderValue,
        }


        this.onClick = this.onClick.bind(this);
    }
    static navigationOptions = {
        ...Nav.options,
        headerTitle:"升级" + c_agentName,
    }

    onClick(){
        const {data, onPop} = this.props.navigation.state.params;
        let score = 100 - this.state.slider;
        Dialog.msg2("确定将 " + data.username + " 升级为" + c_agentName + "?", ()=>{
            Net.request("member/upAgent", {id:data.id, score}).then(r=>{
                if(r.data){
                    Dialog.msg1("升级" + c_agentName + "成功")
                    Navigator.pop();
                    onPop && onPop();
                }else{
                    Dialog.msg1("升级失败")
                }
            });
        })
    }
    render(){
        const data = this.state.data;
        return <View style = {{flex:1, backgroundColor:Color.back}}>
            <Nav.StatusBar/>
            <View style = {{padding:Lt.pad, backgroundColor:"white"}}>
                <View style={{flexDirection:"row", alignItems:"center"}}>
                    <Label style={{fontSize:Lt.c16, color:Color.c3}}>升级对象:</Label>
                    <Fimage style={{width:60, height:60, borderRadius:30, marginHorizontal:5}} uri={data.image}/>
                    <Label style={{fontSize:Lt.c16, color:Color.c3}}>{data.username}</Label>
                </View>
                <Label style={{fontSize:Lt.c16, color:Color.c3, marginTop:30}}>
                    {"设置我的佣金比例: "}
                    <Label style={{fontSize:Lt.c20, color:Color.theme}}>{this.state.slider}</Label>
                    <Label style={{color:Color.theme}}>%</Label>
                </Label>
                <Slider style={{minWidth:240, width: "60%", alignSelf:"center", marginVertical:Lt.margin}}
                    minimumValue={10} 
                    maximumValue={90}
                    step={10}
                    value={c_defaultSliderValue}
                    onValueChange={slider=>this.setState({slider})}
                />
                <Label style={{fontSize:Lt.c16, color:Color.c3, marginVertical:Lt.margin}}>
                    {"我的" + eRole.names[eRole.AGENT] + "将拿 "}
                    <Label style={{fontSize:Lt.c20, color:Color.theme}}>{100-this.state.slider}</Label>
                    <Label style={{color:Color.theme}}>%</Label>
                    {" 佣金比例"}
                </Label>
            </View>
            <Button.FlexPure onPress={this.onClick} title={"确定"}/>
            <View style={{marginHorizontal:20}}>
                <Label style={{fontSize:Lt.c16, color:Color.c6}}>提示:</Label>
                <Label style={{color:Color.c6}}>
                    <Label style={{opacity:0}}>{" "}</Label>
                    {"佣金比例设置好后无法在APP上再次修改，如有需要，请联系客服审核通过后修改！"}
                </Label>
            </View>
        </View>;
    }
}